<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem>系统配置</BreadcrumbItem>
      <BreadcrumbItem>消息通知</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>
  </div>
  <div class="tab">
    <Tabs value="name1" :animated="false" style="padding: 10px">
      <TabPane label="二维码配置" name="ewmpz">
        <div class="ewmpz">
          <Form
            ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80"
          >
            <FormItem label="码制" prop="gender">
              <RadioGroup v-model="formValidate.gender">
                <Radio label="male">QR Code</Radio>
                <Radio label="female">汉信码</Radio>
                <Radio label="female">PDF417</Radio>
                <Radio label="female">Data Matrix </Radio>
              </RadioGroup>
            </FormItem>

            <FormItem label="容错率" prop="gender">
              <RadioGroup v-model="formValidate.gender">
                <Radio label="male">7%</Radio>
                <Radio label="female">15%</Radio>
                <Radio label="female">25%</Radio>
                <Radio label="female">30% </Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="尺寸" prop="gender">
              <RadioGroup v-model="formValidate.gender">
                <Radio label="male">300 * 300 px</Radio>
                <Radio label="female">400 * 400 px</Radio>
                <Radio label="female">500 * 500 px</Radio>
                <Radio label="female">1000 * 1000 px</Radio>
                <Radio label="female">自定义尺寸 </Radio>
              </RadioGroup>
            </FormItem>

            <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')"
                >保存</Button
              >
            </FormItem>
          </Form>
        </div>
      </TabPane>

      
        <TabPane label="二维码清单" name="ewmqd">
          <div class="ewmqd"></div>
        </TabPane>
     
    </Tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
const formValidate = ref({
  name: "",
  mail: "",
  city: "",
  gender: "",
  interest: [],
  date: "",
  time: "",
  desc: "",
});
const ruleValidate = ref({
  name: [
    { required: true, message: "The name cannot be empty", trigger: "blur" },
  ],
  mail: [
    { required: true, message: "Mailbox cannot be empty", trigger: "blur" },
    { type: "email", message: "Incorrect email format", trigger: "blur" },
  ],
  city: [
    { required: true, message: "Please select the city", trigger: "change" },
  ],
  gender: [
    {  message: "Please select gender", trigger: "change" },
  ],
  interest: [
    {
      required: true,
      type: "array",
      min: 1,
      message: "Choose at least one hobby",
      trigger: "change",
    },
    {
      type: "array",
      max: 2,
      message: "Choose two hobbies at best",
      trigger: "change",
    },
  ],
  date: [
    {
      required: true,
      type: "date",
      message: "Please select the date",
      trigger: "change",
    },
  ],
  time: [
    {
      required: true,
      type: "string",
      message: "Please select time",
      trigger: "change",
    },
  ],
  desc: [
    {
      required: true,
      message: "Please enter a personal introduction",
      trigger: "blur",
    },
    {
      type: "string",
      min: 20,
      message: "Introduce no less than 20 words",
      trigger: "blur",
    },
  ],
});

const handleSubmit = (name) => {
  this.$refs[name].validate((valid) => {
    if (valid) {
      this.$Message.success("Success!");
    } else {
      this.$Message.error("Fail!");
    }
  });
};
const handleReset = (name) => {
  this.$refs[name].resetFields();
};
</script>

<style scoped>
.nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    font-size: 20px;
  }

.ewmpz{
    border-left: 5px solid#f5f7f9;
    border-right: 5px solid#f5f7f9;
    background-color: #fff;
    height: 100vh;
    width: 100%;
    padding: 20px;
    padding-left: 100px;
}
.ewmqd{
    border-left: 5px solid#f5f7f9;
    border-right: 5px solid#f5f7f9;
    background-color: #fff;
    height: 100vh;
    width: 100%;
}

</style>